<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>所有教练</title>
</head>
<body>
<div id="app">
    <el-container>
        <!--顶栏-->
        <el-header>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"><a href="userHome.html">个人中心</a></el-menu-item>
                <el-menu-item index="2"><a href="venueSearch.html">所有场馆</a></el-menu-item>
                <el-menu-item index="3"><a href="allCoach.html">所有教练</a></el-menu-item>
                <el-menu-item index="4"><a href="article.html">论坛</a></el-menu-item>
            </el-menu>
            <div class="line"></div>
        </el-header>
        <el-main>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="教练姓名">
                    <el-input v-model="formInline.condition" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="coach" border>
                <el-table-column align="center" label="头像">
                    <template slot-scope="scope" align="center">
                        <el-button @click="checkImage(scope.row)" type="text" size="small">查看头像</el-button>
<!--                                <span>-->
<!--                                    <img :src="scope.row.image" @click="checkImage(scope.row)"-->
<!--                                         style="width: 100px;height: 100px;">-->
<!--                                </span>-->
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="名称">
                </el-table-column>
                <el-table-column prop="style" label="流派">
                </el-table-column>
                <el-table-column prop="venueName" label="所属场馆">
                </el-table-column>
                <el-table-column prop="gender" label="性别">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showInfo(scope.row)" type="text" size="small">查看 | 签约</el-button>
                        <!--                        <el-button @click="sign(scope.row)" type="text" size="small">签约</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[3, 4]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalRow">
                </el-pagination>
            </div>
        </el-main>
    </el-container>
    <!--弹出框-->
    <el-dialog title="教练风采"
               :visible.sync="showBigImg"
               width="300px">
        <img :src="bigImg"
             style="width: 250px;height: 250px;">
    </el-dialog>
    <el-dialog title="查看教练详情" :visible.sync="dialogVisible" width="30%">
        <span></span>
        <span>{{check.realname}}</span><br>
        <span>性别：{{check.gender}}</span>&nbsp;&nbsp;<span>{{check.age}}岁</span><br>
        <span>个人介绍：{{check.introduce}}</span><br>
        <span>课时费：{{check.price}}</span><br>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="sign">签 约</el-button>
        </span>
    </el-dialog>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                showBigImg:false,
                coach: {
                    accountId: "",
                    coachId: "",
                    username: "",
                    nickname: "",
                    email: "",
                    phone: "",
                    gender: "",
                    age: "",
                    image: "",
                    introduce: "",
                    style: "",
                    venueName: "",
                    price: "",
                    realname: "",
                    link:""
                },
                check: {}, // 一条教练的信息
                dialogVisible: false,// 是否显示弹窗
                currentPage: 1,// 当前页
                size: 3,// 每页多少条
                totalRow: 1,// 总条目数
                formInline: {
                    day: "",
                    time: "",
                    condition: "",
                    state: "",
                    current: 1,
                    size: 3
                },
                activeIndex: '3',
                bigImage:""
            }
        },
        methods: {
            checkImage(row){
                this.showBigImg=true;
                this.bigImg="https://silas103.oss-cn-chengdu.aliyuncs.com/"+row.image
            },
            // 分页
            handleSizeChange(val) {
                this.size = val
                this.getAll()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getAll()
            },
            // 获取所有教练
            getAll() {
                axios.get("/coach/findAll?page=" + this.currentPage + "&size=" + this.size).then(resp => {
                    if (resp.status === resp.data.code) {
                        // console.log(resp.data.data)
                        this.coach = resp.data.data.records;
                        this.totalRow = resp.data.data.total;
                    }
                })
            },
            // 获取教练信息
            showInfo(row) {
                console.log(row);
                this.check = row;
                this.dialogVisible = true;
            },
            // 签约教练
            sign() {
                this.$confirm('确定签约吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    this.dialogVisible = false
                    axios.post("/sign/build?coachId=" + this.check.coachId).then(resp => {
                        if (resp.data.code === resp.status) {
                            this.$message({type: 'success', message: '签约成功!'});
                        }
                    })
                });
            },
        },
        created() {
            this.getAll();
        }
    })
</script>
</body>
</html>